<template>
  <div class="inventory-report">
    <el-form :model="formData" ref="form" :rules="rules" label-width="120px">
      <div class="form-section">
        <h3>盘点报告</h3>
        
        <el-form-item label="盘点结论" prop="conclusion">
          <el-input
            type="textarea"
            v-model="formData.conclusion"
            :rows="4"
            placeholder="请输入盘点结论">
          </el-input>
        </el-form-item>

        <el-form-item label="存在问题" prop="problems">
          <el-input
            type="textarea"
            v-model="formData.problems"
            :rows="4"
            placeholder="请描述盘点过程中发现的问题">
          </el-input>
        </el-form-item>

        <el-form-item label="改进建议" prop="suggestions">
          <el-input
            type="textarea"
            v-model="formData.suggestions"
            :rows="4"
            placeholder="请提出改进建议">
          </el-input>
        </el-form-item>

        <el-form-item label="附件" prop="attachments">
          <el-upload
            action="/api/file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="5"
            :file-list="formData.attachments">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">可上传盘点相关文件，单个文件不超过10MB</div>
          </el-upload>
        </el-form-item>
      </div>

      <div class="form-actions">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'InventoryReport',
  data() {
    return {
      formData: {
        conclusion: '',
        problems: '',
        suggestions: '',
        attachments: []
      },
      rules: {
        conclusion: [{ required: true, message: '请输入盘点结论', trigger: 'blur' }],
        problems: [{ required: true, message: '请描述存在的问题', trigger: 'blur' }],
        suggestions: [{ required: true, message: '请提出改进建议', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      this.formData.attachments = fileList
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    prevStep() {
      this.$emit('prev-step')
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('next-step', this.formData)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inventory-report {
  .form-section {
    margin-bottom: 30px;
    
    h3 {
      margin: 0 0 20px;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  .form-actions {
    text-align: center;
    margin-top: 40px;
  }

  .el-upload__tip {
    color: #909399;
  }
}
</style> 